<template>
  <div class="boxSat">
    <div class="fullContainer">
      <div class="fullTitle">
        <img src="@/assets/images/full_titleimg0.png" alt="" /><span
          >智能充电系统</span
        ><img src="@/assets/images/full_titleimg.png" alt="" />
      </div>
      <div class="fullBox">
        <div class="f1D fD">
          <div class="div1">
            <div class="dTitleB">
              <p class="dTitle">今日能耗</p>
            </div>
            <div class="dInfoB">
              <img src="@/assets/images/full_img1.png" alt="" />
              <div class="div1Info">
                <p>{{ dayKWh }}</p>
                <p>KWh</p>
              </div>
            </div>
          </div>
          <div class="div2">
            <div class="dTitleB">
              <p class="dTitle">设备统计</p>
            </div>
            <div id="main" style="width: 390px; height: 480px"></div>
            <div class="div2Info">
              <p>
                <img src="@/assets/images/full_station.png" alt="" /><span
                  >电站数量</span
                ><span>{{ stationNum }}</span>
              </p>
              <p>
                <img src="@/assets/images/full_shebei.png" alt="" /><span
                  >设备数量</span
                ><span>{{ deviceNum }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="f2D fD">
          <div class="div3">
            <div id="main1" style="width: 846px; height: 518px"></div>
            <div class="div3Info">
              <p>30天实时订单量</p>
              <p class="num">
                <span v-for="(item, index) in numArr" :key="index">
                  {{ item }}
                </span>
              </p>
            </div>
            <!-- <button class="goScreenmapBtn" ng-click="goScreenmapBtn()" ng-hide="userType==7"> 
                      全屏显示
                      </button> -->
          </div>
          <div class="div4">
            <div class="dTitleB">
              <p class="dTitle">运营日报</p>
            </div>
            <div id="main2" style="width: 846px; height: 320px"></div>
            <div class="div4Info">
              <p>{{ date }}</p>
              <!-- <button ng-click="isTrueFun(0,1,2)" ng-class="{'btnSelect':isTrue[0]}">插口利用率</button>
                          <button ng-click="isTrueFun(1,0,2)" ng-class="{'btnSelect':isTrue[1]}">充电次数</button>
                          <button ng-click="isTrueFun(2,0,1)" ng-class="{'btnSelect':isTrue[2]}">充电电量</button> -->
            </div>
          </div>
        </div>
        <div class="f3D fD">
          <div class="div5">
            <div class="dTitleB">
              <p class="dTitle">24小时充电趋势</p>
            </div>
            <div id="main3" style="width: 600px; height: 317px"></div>
          </div>
          <div class="div6">
            <div class="dTitleB">
              <p class="dTitle">实时订单</p>
            </div>
            <div class="div6Info">
              <div class="line">
                <img src="@/assets/images/full_circular.png" alt="" /><img
                  src="@/assets/images/full_triangle.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import json from '@/assets/json/dataE.json'
import { cloneDeep } from 'lodash'
import '@/utils/china.js'
export default {
  name: 'Statics',
  data() {
    return {
      nameData: [[], [], []],
      barData: [[], [], []],
      dayKWh: '',
      box: null,
      stationNum: '',
      deviceNum: '',
      interval1: null,
      interval2: null,
      interval3: null,
      myChart: null,
      myChart1: null,
      myChart2: null,
      myChart3: null,
      isTrue: [true, false, false],
      numArr: 0,
      date: '',
    }
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById('main'))
    this.myChart1 = echarts.init(document.getElementById('main1'))
    this.myChart2 = echarts.init(document.getElementById('main2'))
    this.myChart3 = echarts.init(document.getElementById('main3'))
    this.getHourData(true)

    this.interval1 = setInterval(() => {
      this.getHourData(false)
    }, 20 * 60000)

    this.getStationStatis()
    this.setMyChart(
      [
        { value: 0, name: '空闲' },
        { value: 0, name: '故障' },
        { value: 0, name: '充电中' },
      ],
      [{ value: 0, name: '设备数量' }],
      false
    )
    this.getStationNum(true)
    this.interval2 = setInterval(() => {
      this.getStationNum(false)
    }, 5 * 60000)

    this.box = document.getElementsByClassName('div6Info')

    this.getLastBill(true)
    this.interval3 = setInterval(() => {
      this.getLastBill(false)
    }, 6000)

    this.initEData()

    let date = new Date().getTime() - 24 * 60 * 60 * 1000
    this.date = new Date(date).toJSON()
    let index = this.date.indexOf('T')
    this.date = this.date.substring(0, index)
  },
  destroyed() {
    if (this.interval1) {
      clearInterval(this.interval1)
      this.interval1 = null
    }
    if (this.interval2) {
      clearInterval(this.interval2)
      this.interval2 = null
    }
    if (this.interval3) {
      clearInterval(this.interval3)
      this.interval3 = null
    }
  },
  methods: {
    // 获取实时订单
    mookHours() {
      return new Promise((res) => {
        res('hello')
      })
    },
    getHourData(bol) {
      this.mookHours().then((res) => {
        if (res.code == 1) {
          this.dayKWh = res.result.eleSum.toFixed(2)
          var lists = res.result.detail
          var lineSeriesData = []
          var linexAxisData = []
          for (var i = lists.length - 1; i >= 0; i--) {
            lists[i].startTime = String(lists[i].startTime).substring(11, 13)
            linexAxisData.push(lists[i].startTime + ':00')
            lineSeriesData.push(lists[i].billCount)
          }
          if (bol) {
            this.setMyChart3(lineSeriesData, linexAxisData)
          } else {
            this.myChart3.setOption({
              xAxis: [
                {
                  data: linexAxisData,
                },
              ],
              series: [
                {
                  name: '充电趋势图',
                  data: lineSeriesData,
                },
              ],
            })
          }
        }
      })
    },
    getStationStatis() {
      this.mookHours().then((res) => {
        if (res.code == 1) {
          for (let i = 0; i < res.result.pluList.length - 1; i++) {
            for (let j = i; j < res.result.pluList.length; j++) {
              let temp
              if (
                res.result.pluList[i].plUsage < res.result.pluList[j].plUsage
              ) {
                temp = cloneDeep(res.result.pluList[i])
                res.result.pluList[i] = cloneDeep(res.result.pluList[j])
                res.result.pluList[j] = cloneDeep(temp)
              }
            }
          }
          for (let i = 4; i >= 0; i--) {
            this.nameData[0].push(res.result.pluList[i].stationName)
            this.barData[0].push(parseFloat(res.result.pluList[i].plUsage))
            this.nameData[1].push(res.result.chList[i].stationName)
            this.barData[1].push(res.result.chList[i].chSum)
            this.nameData[2].push(res.result.eleList[i].stationName)
            this.barData[2].push(res.result.eleList[i].eleSum)
          }

          this.setMyChart2(this.nameData, this.barData)
        }
      })
    },
    getStationNum(bol) {
      this.mookHours().then((res) => {
        if (res.code == 1) {
          this.stationNum = res.result.stationNum //电站数
          this.deviceNum = res.result.deviceNum - res.result.offlineNum //设备数
          let pieData = []
          let pieData1 = []
          pieData.push({ value: res.result.idleNum, name: '空闲' })
          pieData.push({ value: res.result.faultNum, name: '故障' })
          pieData.push({ value: res.result.chargingNum, name: '充电中' })

          pieData1.push({
            value: res.result.deviceNum - res.result.offlineNum,
            name: '设备数量',
          })
          if (bol) {
            this.setMyChart(pieData, pieData1, true)
          } else {
            this.myChart.setOption({
              series: [
                {
                  name: '插口充电状态',
                  data: pieData,
                },
              ],
            })
          }
        }
      })
    },
    gdb(item) {
      let p = document.createElement('p')
      p.style.height = 0
      p.innerHTML = `<span class="span">${item.createTime.time}</span><span class="span2">用户${item.userMobile}</span><span class="span3">${item.stationName}</span>`
      this.box.insertBefore(p, this.box.childNodes[0])
      let first = document.getElementsByClassName('.div6Info p:first')
      first.animate({ height: '+22px' }, 'slow', () => {
        let last = document.getElementsByClassName('.div6Info p:last')
        if (document.getElementsByClassName('.div6Info p').length >= 9) {
          last.remove()
        }
      })
    },
    getLastBill(bol) {
      this.mookHours().then((res) => {
        let lastTemp
        if (res.code == 1 && res.result.detail) {
          let numTotal = res.result.count
          let billLists = res.result.detail
          this.numArr = String(numTotal).split('')
          for (let i = billLists.length - 1; i >= 0; i--) {
            let temp = new Date(billLists[i].createTime.time).toJSON()
            let tIndex = temp.indexOf('T')
            billLists[i].createTime.hours =
              billLists[i].createTime.hours < 10
                ? '0' + billLists[i].createTime.hours
                : billLists[i].createTime.hours
            billLists[i].createTime.minutes =
              billLists[i].createTime.minutes < 10
                ? '0' + billLists[i].createTime.minutes
                : billLists[i].createTime.minutes
            billLists[i].createTime.seconds =
              billLists[i].createTime.seconds < 10
                ? '0' + billLists[i].createTime.seconds
                : billLists[i].createTime.seconds
            billLists[i].createTime.time =
              temp.substring(0, tIndex) +
              '  ' +
              billLists[i].createTime.hours +
              ':' +
              billLists[i].createTime.minutes +
              ':' +
              billLists[i].createTime.seconds
            // if (bol) {
            //     $('<p style="height:22px;"><span class="span1">' + billLists[i].createTime.time + '</span><span class="span2">用户 ' + billLists[i].userMobile + '</span><span class="span3">' + billLists[i].stationName + '</span></p>').prependTo(_box);
            //     lastTemp = cloneDeep(billLists[0])
            // }
          }
          if (
            !bol &&
            lastTemp &&
            lastTemp.createTime.time != billLists[0].createTime.time &&
            billLists[0].stationName != lastTemp.stationName
          ) {
            lastTemp = cloneDeep(billLists[0])
            this.gdb(billLists[0])
          }
        }
      })
    },
    initEData() {
      let weiboData = json.map((serieData) => {
        let px = serieData[0] / 1000
        let py = serieData[1] / 1000
        let res = [[px, py]]

        for (let i = 2; i < serieData.length; i += 2) {
          let dx = serieData[i] / 1000
          let dy = serieData[i + 1] / 1000
          let x = px + dx
          let y = py + dy
          if (i % 6 == 0) {
            res.push([x, y, 1])
          } else if (x > 84 && x < 119 && y > 36 && y < 40) {
            res.push([x, y, 1])
          }
          px = x
          py = y
        }
        return res
      })

      this.myChart1.setOption({
        geo: {
          name: '强',
          type: 'scatter',
          map: 'china',
          bottom: 10,
          top: 20,
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: '#1a1c38',
              borderColor: '#2c47d7',
            },
            emphasis: {
              areaColor: '#2a333d',
            },
          },
        },
        series: [
          {
            name: '弱',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 1,
            large: true,
            itemStyle: {
              normal: {
                color: '#2076d3',
              },
            },
            data: weiboData[0],
          },
          {
            name: '中',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 1,
            large: true,
            itemStyle: {
              normal: {
                shadowBlur: 2,
                shadowColor: 'rgba(14, 241, 242, 0.8)',
                color: '#2290dd',
              },
            },
            data: weiboData[1],
          },
          {
            name: '强',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 1,
            large: true,
            itemStyle: {
              normal: {
                color: '#ffffff',
              },
            },
            data: weiboData[2],
          },
        ],
      })
    },
    setMyChart(pieData, pieData1, showBol) {
      this.myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          top: '84%',
          data: ['充电中', '空闲', '故障'],
          itemGap: 40,
          textStyle: {
            color: '#73819D',
            fontSize: 14,
          },
        },
        series: [
          {
            type: 'pie',
            name: '设备数量',
            hoverAnimation: false,
            center: ['50%', '40%'],
            radius: ['57%', '58%'],
            itemStyle: {
              color: '#4C7BE1',
            },
            label: {
              position: 'center',
              formatter: '{b}',
              fontSize: 16,
            },
            data: pieData1,
          },
          {
            name: '插口充电状态',
            type: 'pie',
            startAngle: 60,
            z: 2,
            center: ['50%', '40%'],
            radius: ['38%', '48%'],
            hoverOffset: 4,
            label: {
              color: '#fff',
              show: showBol,
              fontSize: 14,
              position: 'outside',
              formatter: '{c}',
            },
            labelLine: {
              normal: {
                show: showBol,
                length: 30,
              },
            },
            data: pieData,
            itemStyle: {
              color: function (params) {
                var colorList = ['#422f5a', '#1c3043', '#3d5afe']
                var colorList2 = ['#d08d85', '#cfe20d', '#212642']
                return {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colorList[params.dataIndex],
                    },
                    {
                      offset: 1,
                      color: colorList2[params.dataIndex],
                    },
                  ],
                  globalCoord: true,
                }
              },
            },
          },
        ],
      })
    },
    setMyChart2(nameData, barData) {
      this.myChart2.setOption({
        grid: {
          top: 50,
          bottom: 50,
          right: 130,
          left: 160,
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {a}<br />{c}%',
        },
        xAxis: {
          type: 'value',
          minInterval: 10,
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#73819D',
            formatter: '{value}%',
            fontSize: 14,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#3C66F6',
            },
          },
          splitLine: {
            show: false,
          },
          min: 0,
          max: function (value) {
            return value.max < 100 ? 100 : (parseInt(value.max / 100) + 1) * 100
          },
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#fff',
            fontSize: 14,
            formatter: function (item) {
              if (item.length >= 8) {
                return item.substring(0, 8) + '...'
              }
              return item
            },
          },
          axisLine: {
            lineStyle: {
              color: '#3C66F6',
            },
          },
          data: nameData[0],
        },
        series: [
          {
            name: '插口利用率',
            type: 'bar',
            data: barData[0],
            barWidth: 20,
            itemStyle: {
              color: function () {
                var colorList = ['RGBA(60, 91, 249, 1)']
                var colorList2 = ['RGBA(62, 168, 226, 1)']
                return {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colorList[0],
                    },
                    {
                      offset: 1,
                      color: colorList2[0],
                    },
                  ],
                  globalCoord: true,
                }
              },
            },
            label: {
              color: '#fff',
            },
          },
        ],
      })
    },
    isTrueFun(index, index1, index2) {
      this.isTrue[index] = true
      this.isTrue[index1] = false
      this.isTrue[index2] = false
      if (index == 0) {
        this.myChart2.setOption({
          tooltip: {
            formatter: '{b}: {a}<br />{c}%',
          },
          xAxis: {
            type: 'value',
            minInterval: 10,
            axisLabel: {
              color: '#73819D',
              formatter: '{value}%',
            },
            min: 0,
            max: function (value) {
              return value.max < 100
                ? 100
                : (parseInt(value.max / 100) + 1) * 100
            },
          },
          yAxis: {
            data: this.nameData[0],
          },
          series: [
            {
              name: '插口利用率',
              data: this.barData[0],
            },
          ],
        })
      } else if (index == 1) {
        this.myChart2.setOption({
          tooltip: {
            formatter: '{b}: {a}<br />{c}次',
          },
          xAxis: {
            type: 'value',
            minInterval: 20,
            axisLabel: {
              color: '#73819D',
              formatter: '{value}次',
            },
            max: function (value) {
              return value.max < 100
                ? 100
                : (parseInt(value.max / 100) + 1) * 100
            },
            min: 0,
          },
          yAxis: {
            data: this.nameData[1],
          },
          series: [
            {
              name: '充电次数',
              data: this.barData[1],
            },
          ],
        })
      } else {
        this.myChart2.setOption({
          tooltip: {
            formatter: '{b}: {a}<br />{c}度',
          },
          xAxis: {
            type: 'value',
            minInterval: 10,
            axisLabel: {
              color: '#73819D',
              formatter: '{value}度',
            },
            max: function (value) {
              return value.max < 100
                ? 100
                : (parseInt(value.max / 100) + 1) * 100
            },
            min: 0,
          },
          yAxis: {
            data: this.nameData[2],
          },
          series: [
            {
              name: '充电电量',
              data: this.barData[2],
            },
          ],
        })
      }
    },
    setMyChart3(lineSeriesData, linexAxisData) {
      this.myChart3.setOption({
        grid: {
          top: 60,
          bottom: 80,
          right: 30,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{c}',
          position: function (point) {
            return [point[0] - 20, point[1] - 50]
          },
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: '#73819D',
              fontSize: 14,
              padding: [6, 0, 0, 0],
            },
            axisLine: {
              show: false,
            },
            data: linexAxisData,
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '订单数（个）',
            z: 2,
            nameLocation: 'end',
            nameTextStyle: {
              color: '#73819D',
              fontSize: 14,
            },
            boundaryGap: false,
            nameGap: 20,
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: '#73819D',
              fontSize: 14,
            },
            splitLine: {
              lineStyle: {
                color: '#2e4ba4',
                opacity: '0.4',
              },
            },
            minInterval: 100,
            max: function (value) {
              return value.max < 100
                ? 100
                : (parseInt(value.max / 100) + 1) * 100
            },
            min: 0,
          },
        ],
        series: [
          {
            name: '充电趋势图',
            type: 'line',
            lineStyle: {
              opacity: 0,
            },
            itemStyle: {
              color: '#659C00',
            },
            nameGap: 100,
            nameLocation: 'end',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#3d5afe', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#3043b1', // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
            smooth: true,
            data: lineSeriesData,
          },
        ],
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.screenmapdBox {
  width: 100%;
  height: 100%;
  position: relative;
  p {
    margin: 0;
  }
}

.screenmapdBox .fullTitle {
  color: #4c7be1;
  font-size: 20px;
  padding: 6px 20px;
  box-sizing: border-box;
  z-index: 22;
  background: url('../../assets/images/full_title.png') no-repeat;
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  background-size: 100% 100%;
  img:nth-child(1) {
    margin-right: 20px;
  }
  span:nth-child(2) {
    display: inline-block;
    margin-right: 20px;
  }
}

.screenmapdBox .goStatistics {
  position: absolute;
  top: 90px;
  right: 20px;
  z-index: 1000;
  width: 100px;
  font-size: 14px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
  outline: none;
  border: none;
  background-color: rgba(50, 68, 163, 0.9);
}

.screenmapdBox .areaSelect {
  position: absolute;
  top: 90px;
  left: 20px;
  z-index: 1000;
}

#screenmap {
  width: 100%;
  min-height: 100%;
  .circleOverlay {
    position: absolute;
    width: 90px;
    height: 90px;
    padding: 2px;
    border-radius: 50%;
    background-color: rgba(50, 68, 163, 0.9);
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-clip: padding-box;
    border: 8px solid rgba(50, 68, 163, 0.36);
    .circleOverlayTop {
      margin-top: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .circleOverlaySel {
    background-color: rgba(108, 157, 75, 1) !important;
    border: 8px solid rgba(140, 202, 98, 0.5) !important;
  }
}

.echartsBarbox {
  width: 300px;
  height: 260px;
  background: url(../../assets/images/full_Popup.png) no-repeat;
  background-size: 100% 100%;
  z-index: 2222;
  position: absolute;
  .full_close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 10px;
    z-index: 99999;
  }
  #echartsBar {
    position: absolute;
    top: 0;
  }
}

.boxSat {
  width: 100%;
  height: 100%;
  min-width: 1920px;
  min-height: 1080px;
  background: url('../../assets/images/full-back.png') no-repeat;
  background-size: 100% 100%;
}

.fullContainer {
  p {
    margin: 0;
  }
  width: 100%;
  width: 1920px;
  height: 100%;
  min-height: 1080px;
  padding: 20px 20px 80px;
  box-sizing: border-box;
  margin: auto;
  position: relative;
  .fullTitle {
    color: #4c7be1;
    font-size: 20px;
    padding: 6px 20px;
    width: 100%;
    background: url('../../assets/images/full_title.png') no-repeat;
    img:nth-child(1) {
      margin-right: 20px;
    }
    span:nth-child(2) {
      display: inline-block;
      margin-right: 20px;
    }
  }
  .fullBox {
    top: 90px;
    bottom: 80px;
    left: 20px;
    right: 20px;
    position: absolute;
    .fD {
      box-sizing: border-box;
      position: relative;
      .dTitleB {
        text-align: center;
        .dTitle {
          display: inline-block;
          padding: 12px 80px 10px 90px;
          font-size: 16px;
          text-align: center;
          color: #5589fa;
          background: url(../../assets/images/full_litter_title.png);
          background-size: 100% 100%;
        }
      }
    }
    .fD > div {
      box-sizing: border-box;
      position: absolute;
    }
    .f1D {
      width: 21%;
      height: 100%;
      float: left;
      .div1 {
        width: 100%;
        height: 40%;
        background: url(../../assets/images/full_left_top.png) no-repeat;
        background-size: 100% 100%;
        .dInfoB {
          margin-top: 24%;
          text-align: center;
          vertical-align: middle;
          img {
            width: 32%;
            vertical-align: middle;
            margin-right: 20px;
          }
          .div1Info {
            display: inline-block;
            vertical-align: middle;
            text-align: left;
            p:nth-child(1) {
              font-size: 40px;
              color: #fff;
              font-weight: 700;
            }
            p:nth-child(2) {
              font-size: 20px;
              color: #4c7be1;
            }
          }
        }
      }
      .div2 {
        width: 100%;
        height: 58%;
        text-align: center;
        background: url(../../assets/images/full_left_bottom.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
        #main {
          margin: auto;
        }
        .div2Info {
          position: absolute;
          top: 78%;
          left: 0;
          right: 0;
          margin: auto;
          p {
            display: inline-block;
            font-size: 14px;
            &:nth-child(1) {
              margin-right: 30px;
            }
            span:nth-child(2) {
              margin: auto 6px;
              color: #73819d;
            }
            span:nth-child(3) {
              color: #fff;
            }
          }
          img {
            width: 16px;
          }
        }
      }
    }
    .f2D {
      width: 45%;
      height: 100%;
      float: left;
      margin-left: 1%;
      margin-right: 1%;
      .div3 {
        width: 100%;
        height: 57%;
        background: url(../../assets/images/full_center_top.png) no-repeat;
        background-size: 100% 100%;
        .div3Info {
          position: absolute;
          top: 20px;
          left: 20px;
          color: #4c7be1;
          font-size: 16px;
          .num span {
            top: 14px;
            margin-right: 4px;
            display: inline-block;
            padding: 0 6px;
            background: url(../../assets/images/full_num.png) no-repeat;
            background-size: 100% 100%;
            color: #fff;
            font-size: 24px;
            font-weight: 700;
          }
        }
        .goScreenmapBtn {
          font-size: 16px;
          position: absolute;
          bottom: 20px;
          left: 20px;
          width: 100px;
          color: #5589fa;
          padding: 6px 0;
          background: url(../../assets/images/full_noselect.png) no-repeat;
          background-size: 100% 100%;
          border: none;
          outline: none;
        }
        #main1 {
          margin: auto;
        }
      }
      .div4 {
        width: 100%;
        height: 41%;
        background: url(../../assets/images/full_center_bottom.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
        .div4Info {
          position: absolute;
          top: 20px;
          right: 30px;
          color: #6f7d99;
          font-size: 16px;
          text-align: center;
          p {
            margin-bottom: 10px;
            margin-top: 10px;
            font-size: 18px;
          }
          button {
            display: block;
            width: 100px;
            font-size: 16px;
            color: #5589fa;
            padding: 6px 0;
            background: url(../../assets/images/full_noselect.png) no-repeat;
            background-size: 100% 100%;
            border: none;
            outline: none;
            margin-bottom: 20px;
            &.btnSelect {
              background: url(../../assets/images/full_select.png) no-repeat;
              background-size: 100% 100%;
              color: #fff;
            }
          }
        }
        #main2 {
          margin: auto;
        }
      }
    }
    .f3D {
      width: 32%;
      height: 100%;
      float: left;
      .div5 {
        width: 100%;
        height: 40%;
        background: url(../../assets/images/full_right_top.png) no-repeat;
        background-size: 100% 100%;
        #main3 {
          margin: auto;
        }
      }
      .div6 {
        width: 100%;
        height: 58%;
        background: url(../../assets/images/full_right_bottom.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
        .div6Info {
          margin-top: 70px;
          position: relative;
          margin-left: 50px;
          height: 320px;
          overflow: hidden;
          color: #6a7893;
          .line {
            position: absolute;
            width: 2px;
            height: 320px;
            top: 0px;
            left: 190px;
            background: RGBA(61, 90, 254, 0.3);
            img:nth-child(1) {
              position: absolute;
              top: 0;
              left: -3px;
            }
            img:nth-child(2) {
              width: 8px;
              position: absolute;
              bottom: 0;
              left: -3px;
            }
          }
          p {
            margin-bottom: 20px;
            font-size: 16px;
            span {
              display: inline-block;
              vertical-align: bottom;
            }
            .span2 {
              margin-left: 90px;
            }
            .span3 {
              margin-left: 40px;
              width: 140px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}

.sideMenuBtn {
  display: block;
  width: 100px;
  font-size: 12px;
  color: #5589fa;
  padding: 6px 0;
  background: url(../../assets/images/full_noselect.png) no-repeat;
  background-size: 100% 100%;
  border: none;
  outline: none;
  margin-left: 10px;
  margin-top: 10px;
}
</style>
